<template>
    <div class="ys-personcell">
        <div >
            <ul >
                <li v-for="(item,index) in perList" class="page-infinite-listitem flex-layout"
                    @click="goOtherHomePage(index)">
                    <div class="ranking" :class="{['top-three-ranking' + index]:item.isTopThree}">{{index + 1}}</div>
                    <Avatar :avatar="item.avatar" :name="item.name"></Avatar>

                    <div class="person-info flex">
                        <div class="name">{{item.name}}</div>
                        <div class="depName">{{item.depName}}</div>
                    </div>

                    <span class="walking-number flex" :class="{'top-three':item.isTopThree}">{{item.formatStep || item.stepCount}}</span>
                    <div class="like" @click.stop = 'giveLike(index)'  :class = "{'liked':item.isUpVote}">
                        <span>{{item.upVote}}</span>
                        <div> <i class="iconfont icon-heart"></i></div>
                    </div>
                </li>
            </ul>
            <p v-show="loading" class="page-infinite-loading">
                <mt-spinner type="fading-circle"></mt-spinner>
                加载中...
            </p>
        </div>
    </div>
</template>

<script type="text/babel">
    import util from '../assets/util'
    import config from '../assets/config.js'
    import Avatar from './ys-avatar.vue'

    export default {
        data() {
            return {
                loading: false,
                allLoaded: false,
                wrapperHeight: 0,

                isFinished:false,
                perList:[],
                pageInfo: {
                    page: 1,
                    size: 10
                },
                upVoteUrl: config.host + config.upVoteUrl

            };
        },

        props:{
            perUrl:String,
            depId:''
        },
        watch:{
            depId() {
                this.pageInfo.page = 1;
                this.perList = [];
                this.init();
            }

        },
        created() {
        },
        methods: {
            init() {
                this.loading = true;
                this.initPerData();

            },
            initPerData(){
                let params = this.pageInfo;
                if(this.depId) {
                    params.depId = this.depId;
                }
                this.$http.get(this.perUrl, {
                    params
                }).then((res)=>{

                    this.loading = false;

                    this.formatPerStep(res.data.list);

                    this.perList = res.data.list;

                    let length = this.perList.length;
                    if(length < this.pageInfo.size) {
                        this.$eventBus.$emit('team-loadComplete');
                        this.isFinished = true;
                        this.loading = false;
                    } else {
                        this.isFinished = false;
                        this.pageInfo.page ++;
                    }

                    if(length) {
                        for (let i =0; i<3; i++){
                            if(this.perList[i]) {
                                this.perList[i].isTopThree = true;
                            }
                        }
                    }

                }).catch((res) => {
                    console.log(res);
                    this.loading = false;
                });
            },

            loadMore() {
                if(this.loading) return;
                this.loading = true;
                this.$http.get(this.perUrl, {
                    params:this.pageInfo
                }).then((res)=>{
                    this.loading = false;

                    this.formatPerStep(res.data.list);
                    let length = res.data.list.length;

                    //难点
                    this.perList = this.perList.concat(res.data.list);
                    if(length < this.pageInfo.size) {
                        this.isFinished = true;
                        this.loading = false;
                        this.$eventBus.$emit('team-loadComplete');
                    } else {
                        this.pageInfo.page ++;
                        this.isFinished = false;

                    }




                }).catch((res) => {
                    this.loading = false;
                });

            },

            giveLike(i){

                var me = this;

                let rowdata = this.perList[i];
                let userInfo = util.session.get('sport-user-info');

                if(rowdata.memberId === userInfo.memberId) {
                    util.session.set('praise-row-data', rowdata);
                    this.$router.push('/praiseList');

                }else {

                    this.$http.post(this.upVoteUrl,
                            {id : this.perList[i].id}
                    ).then((res)=>{
                        if (res.data.code === 0) {
                            if(res.data.data.upVote > 9999){
                                this.perList[i].upVote = 9999 + "+";
                            }else {
                                this.perList[i].upVote = res.data.data.upVote;
                            }
                            this.perList[i].isUpVote = res.data.data.isUpVote;
                        }
                    }).catch((res) => {
                        console.log(res);
                    });
                }
            },
            initEvent() {
                let me = this;
                this.$eventBus.$on('TeamLoadMore', function () {
                    me.loadMore();
                })
            },

            goOtherHomePage(i){
                let rowData = this.perList[i];
                let userInfo = util.session.get('sport-user-info');
                util.session.set('rowData',rowData);
                if(userInfo.memberId === rowData.memberId) {
                    this.$router.push({path:'/myHomePage'});
                } else {
                    this.$router.push({path:'/otherHomePage'});
                }

            },

            formatPerStep(array){
                array.forEach(function (item) {
                    if(item.stepCount > 9999){
                        item.formatStep = util.formatNumber(item.stepCount);
                    }
                    if(item.upVote > 9999) {
                        item.upVote = '9999+';
                    }
                })
            },

        },

        mounted() {
            this.initEvent();

        },
        components:{
            Avatar
        }
    };
</script>
